<template>
  <div id="dutyManage">
    <div class="title"></div>

    <div class="content">
      <!-- <el-table
        :data="tableData"
        style="width: 100%; height: 100%"
        :cell-class-name="addclass"
      >
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="department" label="部门"></el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="250"
        ></el-table-column>
      </el-table> -->
      <div class="rollTitle">
        <el-row>
          <el-col :span="3">序号</el-col>
          <el-col :span="7">姓名</el-col>
          <el-col :span="7">部门</el-col>
          <el-col :span="7">电话</el-col>
        </el-row>
      </div>
      <vue-seamless-scroll :data="tableData" class="seamless-warp">
        <ul>

          <li v-for="item in tableData" :key="item.id">
            <el-row>

              <el-col
                :span="3"
                style="font-family: dig; font-size: 36px; font-weight: 900"
                >{{ item.id }}</el-col
              >
              <el-col :span="7" class="rollItem">{{ item.name }}</el-col>
              <el-col :span="7" class="rollItem">{{ item.department }}</el-col>
              <el-col :span="7" class="rollItem">{{ item.phone }}</el-col>
            </el-row>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {

  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getDuty();
  },
  methods: {
    addDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const day = date.date > 10 ? date.date : "0" + date.date;
      this.updateTime = date.year + "-" + newmonth + "-" + day;
    },
    getDuty() {
      let that = this;
      let nowDate = this.addDate();
      var myDate = new Date();
      var myyear = myDate.getFullYear();
      var mymonth = myDate.getMonth()+1;
      var myday = myDate.getDate();
      if(mymonth<10){
        mymonth="0"+mymonth;
      }
      nowDate = myyear+"-"+mymonth+"-"+myday;
      // nowDate = "2021-06-26";
      axios
        .post(
          window.apiUrl1+"dutyController/selectDuty?beginTime=" +
            nowDate +
            "&endTime=" +
            nowDate
        )
        .then(function (response) {
          that.tableData = [];
          for (let i = 0; i < response.data.data.length; i++) {
            let item = response.data.data[i];
              that.tableData.push({ id: (i+1), name: item.dutyPersonName, department: item.dutyDepartmentName, phone: item.dutyPersonPhone });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    addclass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "firFont";
      }
    },
  },
};
</script>
<style scoped>
.seamless-warp {
  height: 380px;
  overflow: hidden;
}
#dutyManage {
  box-sizing: border-box;
  margin-top: 20px;
}
.title {
  width: 645px;
  height: 112px;
  background: url("../../../../../static/images/duty.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
</style>
